<template>
  <div id="char01">
    <h3>{{ msg }}</h3>
    <div id="myChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "柱状图展示"
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例",
          x: "center"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
      // console.log("绘制图表完成");
    }
  }
};
</script>
<style scoped>
#char01 {
  text-align: center;
}
#myChart {
  width: 800px;
  height: 600px;
  margin: 0px auto;
  /* background-color: white; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
}
</style>
